import React, { useState } from "react";
import { Layout, Menu, Avatar, Dropdown, Space } from "antd";
import { useNavigate, useLocation, Outlet } from "react-router-dom";
import {
  HomeOutlined,
  PictureOutlined,
  BookOutlined,
  ScheduleOutlined,
  CommentOutlined,
  BarChartOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  LogoutOutlined,
  ShoppingOutlined,
} from "@ant-design/icons";
import useAuthStore from "../stores/authStore";
import "./MainLayout.less";


const { Header, Sider, Content } = Layout;

const MainLayout = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();
  const { user, logout } = useAuthStore();

  // 获取当前选中的菜单项
  const getSelectedKey = () => {
    const pathname = location.pathname;
    // 如果是根路径，返回 dashboard
    if (pathname === '/') {
      return '/dashboard';
    }
    // 如果是其他路径，直接返回当前路径
    return pathname;
  };

  // 处理菜单点击
  const handleMenuClick = ({ key }) => {
    navigate(key);
  };

  // 处理退出登录
  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  // 下拉菜单项
  const dropdownItems = {
    items: [
      {
        key: 'profile',
        label: '个人信息',
        icon: <UserOutlined />,
        onClick: () => navigate('/profile')
      },
      {
        type: 'divider',
      },
      {
        key: 'logout',
        label: '退出登录',
        icon: <LogoutOutlined />,
        danger: true,
        onClick: handleLogout
      },
    ]
  };

  const menuItems = [
    {
      key: "/dashboard",
      icon: <HomeOutlined />,
      label: "首页",
    },
    {
      key: "/carousel",
      icon: <PictureOutlined />,
      label: "轮播图管理",
    },
    {
      key: "/courses",
      icon: <BookOutlined />,
      label: "课程管理",
    },
    {
      key: "/appointments",
      icon: <ScheduleOutlined />,
      label: "预约管理",
    },
    {
      key: "/orders",
      icon: <ShoppingOutlined />,
      label: "订单管理",
    },
    {
      key: "/evaluations",
      icon: <CommentOutlined />,
      label: "评价管理",
    },
    {
      key: "/analytics",
      icon: <BarChartOutlined />,
      label: "数据分析",
    },
  ];

  return (
    <Layout className="main-layout">
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo">
          <BookOutlined />
          {!collapsed && <span className="logo-text">教师管理系统</span>}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[getSelectedKey()]}
          items={menuItems}
          onClick={handleMenuClick}
        />
      </Sider>
      <Layout>
        <Header className="main-header">
          <div className="header-left">
            {React.createElement(
              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                onClick: () => setCollapsed(!collapsed),
                style: { fontSize: "16px", cursor: "pointer" },
              }
            )}
          </div>
          <div className="header-right">
            <Dropdown menu={dropdownItems} placement="bottomRight">
              <Space className="user-dropdown">
                <Avatar 
                  size="small" 
                  icon={<UserOutlined />}
                  src={user?.avatar ? `${user.avatar}?t=${user.avatarTimestamp || Date.now()}` : null}
                />
                <Space className="user-info">
                  <span className="username">{user?.name || '用户'}</span>
                  <span className="user-title">{user?.title}</span>
                </Space>
              </Space>
            </Dropdown>
          </div>
        </Header>
        <Content className="main-content">
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default MainLayout;
